<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>提交订单</title>
    <script type="text/javascript" src="/secondhand/js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var params = new URLSearchParams(window.location.search);
            var goodsid = params.get("goodsid");
            var cartid = params.get("cartid");
            if (goodsid != null && goodsid != "") {
                //显示商品信息
                var url = "/secondhand/queryByGoodsId.shopping";
                var jsonParm = {"goodsid": goodsid};
                $.post(url, jsonParm, function (data) {
                    var jsonObj = JSON.parse(data);
                    $("#goodsid").val(goodsid);
                    $("#goodsname").val(jsonObj.goodsname);
                    $("#goodsprice").val(jsonObj.goodsprice);
                    $("#total").val(jsonObj.goodsprice);
                })
                //加载地址到下拉框
                loadAddressList();
                //回填地址信息
                $("#addressSelect").change(function () {
                    var addressid = $(this).val();
                    if (addressid!=null){
                        getAddressDetail(addressid);
                    } else {
                        $("#receiver").val("");
                        $("#phone").val("");
                        $("#address").val("");
                    }
                })
                //去新增地址
                $("#add_address").prop("href","/secondhand/address/address_toAdd.html?goodsid="+goodsid);

                //提交订单
                $("#orderForm").submit(function (e) {
                    e.preventDefault();//阻止表单默认提交
                    if(validateForm()==true){
                        submitOrder();
                    }
                })

            }
            //下拉框中展示地址
            function loadAddressList(){
                var url = "/secondhand/queryAddress.shopping"
                $.post(url,function (data) {
                    var jsonObj = JSON.parse(data);
                    $("#addressSelect").find("option:not(:first)").remove();
                    if (jsonObj.length>0) {
                        for (var i = 0; i < jsonObj.length; i++) {
                            $("#addressSelect").append($("<option>").val(jsonObj[i].addressid).text(jsonObj[i].username+" "+jsonObj[i].phone+" "+jsonObj[i].address));
                        }
                    }else {
                        $("#addressSelect").append($("<option>").text("暂无地址，请添加地址"));
                    }
                })
            }
            //自动填充地址
            function getAddressDetail(addressid){
                var url = "/secondhand/queryAddressById.shopping"
                var jsonParm = {"addressid":addressid}
                $.post(url,jsonParm,function (data) {
                    var jsonObj = JSON.parse(data);
                    $("#receiver").val(jsonObj.username);
                    $("#phone").val(jsonObj.phone);
                    $("#address").val(jsonObj.address);
                })
            }
            //校验
            function validateForm() {
                var isValid = true;
                var receiver = $("#receiver").val().trim();
                var phone = $("#phone").val().trim();
                var address = $("#address").val().trim();
                if (!receiver) {
                    $("#message0").empty().html("请输入收货人姓名");
                    isValid = false;
                }else{
                    $("#message0").empty();
                    isValid = true;
                }
                if (!phone) {
                    $("#message1").empty().html("请输入联系电话");
                    isValid = false;
                } else if (!/^1\d{10}$/.test(phone)) {
                    $("#message1").empty().html("请输入正确的手机号");
                    isValid = false;
                }else{
                    $("#message1").empty();
                    isValid = true;
                }
                if (!address) {
                    $("#message2").empty().html("请输入收货地址");
                    isValid = false;
                }else{
                    $("#message2").empty();
                    isValid = true;
                }
                return isValid;
            }

            //提交订单
            function submitOrder(){
                var url="/secondhand/saveOne.order?cartid="+cartid
                var formParm = {
                    goodsid: $("#goodsid").val(),
                    address: $("#address").val().trim()
                }
                $.post(url,formParm,function (data) {
                    if(data == "success") {
                        window.location.href = "/secondhand/shopping/order_success.html";
                    }
                })

            }
        })

    </script>
    <style>
        /* 页面布局样式 */
        .order-container {
            width: 600px;
            margin: 50px auto;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .form-group {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        .form-group label {
            width: 120px;
            text-align: right;
            margin-right: 10px;
        }
        .form-group input,
        .form-group select {
            flex: 1;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        /* 商品信息区域 */
        .product-card {
            border: 1px solid #eee;
            padding: 15px;
            margin-bottom: 20px;
            background: #fafafa;
        }
        .product-card p {
            margin: 5px 0;
        }
        /* 总价样式 */
        .total-price {
            font-size: 16px;
            color: #d9534f;
            margin: 10px 0 20px 130px;
        }
        /* 提交按钮 */
        .btn-submit {
            margin-left: 130px;
            padding: 8px 25px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-submit:hover {
            background: #0056b3;
        }
        /* 地址相关样式 */
        .address-actions {
            margin-left: 130px;
            margin-top: 5px;
        }
        .add-new-address {
            color: #007bff;
            text-decoration: none;
            font-size: 14px;
        }
        .add-new-address:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="order-container">
    <h2 style="text-align: center;">确认订单</h2>

    <!-- 订单表单 -->
    <form id="orderForm" action="/secondhand/saveOne.order">
        <!-- 商品信息展示 -->
        <div class="product-card">
            商品ID：&nbsp;&nbsp;&nbsp;<input type="text" readonly="readonly"  name="goodsid" id="goodsid"/>
            <br/>
            商品名称：<input type="text" readonly="readonly" name="goodsname" id="goodsname"/>
            <br/>
            商品价格：<input type="text" readonly="readonly" name="goodsprice" id="goodsprice"/> 元
        </div>
        <!-- 地址选择下拉框 -->
        <div class="form-group">
            <label for="addressSelect">选择地址：</label>
            <select id="addressSelect" name="addressSelect">
                <option value="">请选择已有地址</option>
            </select>
        </div>
        <div class="address-actions">
            <a href="" class="add-new-address" id="add_address">+ 添加新地址</a>
        </div>

        <!-- 收货信息（选择地址后自动填充） -->
        <div class="form-group">
            <label for="receiver">收货人：</label>
            <input type="text" id="receiver" name="receiver" readonly="readonly" placeholder="请输入收货人姓名"><span
                style="color: red"> *</span><span id="message0" style="color: red;" class="message"></span>
        </div>
        <div class="form-group">
            <label for="phone">联系电话：</label>
            <input type="text" id="phone" name="phone" readonly="readonly" placeholder="请输入收货人电话" pattern="1\d{10}"><span
                style="color: red"> *</span><span id="message1" style="color: red;" class="message"></span>
        </div>
        <div class="form-group">
            <label for="address">收货地址：</label>
            <input type="text" id="address" name="address" readonly="readonly" placeholder="请输入详细地址"><span
                style="color: red"> *</span><span id="message2" style="color: red;" class="message"></span>
        </div>

        <!-- 支付方式 -->
        <div class="form-group">
            <label>支付方式：</label>
            <input type="radio" name="payType" value="wechat" checked> 微信支付
            <input type="radio" name="payType" value="alipay"> 支付宝支付
        </div>

        <!-- 总价和提交按钮 -->
        <div class="total-price">
            订单总价：<input type="text" readonly="readonly" id="total"/> 元
        </div>
        <button type="submit" class="btn-submit" >提交订单</button>
    </form>
</div>
</body>
</html>
